<template>
  <div v-loading="loading" element-loading-text="Long loading...">
    <div style="overflow:auto;height: 90%">
      <div>
        <el-tabs v-model="activeName" type="card" :stretch="true" @tab-click="handleClick">
          <el-tab-pane :label="$t('项目文档')" name="deal" />
          <el-tab-pane :label="$t('基金文档')" name="fund" />
          <el-tab-pane :label="$t('客户文档')" name="investor_doc" />
          <el-tab-pane :label="$t('公司文档')" name="enterprise" />
        </el-tabs>
      </div>
      <!-- 搜索 -->
      <div>
        <el-form ref="queryForm" :model="queryParams" :inline="true" style="margin-top: 60px;">
          <el-form-item :label="$t('附件名称')" prop="name">
            <el-input v-model="queryParams.name" clearable />
          </el-form-item>
          <el-form-item :label="$t('附件类型')" prop="type">
            <el-input v-model="queryParams.type" clearable />
          </el-form-item>
          <el-form-item v-if="currentTabName !== '无'" :label="$t(currentTabName)" prop="businessName">
            <el-input v-model="queryParams.businessName" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 正文 -->
      <div v-loading="loading" style="margin-top: 60px;">
        <el-table
          ref="multipleTable"
          :data="fileBorrowingList"
          border
          size="mini"
          tooltip-effect="dark"
          @select="multiOperation"
          @select-all="multiOperationAll"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column v-if="currentTabName !== '无'" :label="$t(currentTabName)" prop="businessName" align="center">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.businessName" placement="right-end">
                <span>{{ scope.row.businessName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('附件名称')" prop="name" align="center">
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.name" placement="right-end">
                <span>{{ scope.row.name }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="$t('附件类型')" prop="type" align="center" width="150">
            <template slot-scope="scope">
              {{ scope.row.type }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('上传人')" prop="nickName" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.nickName }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('上传时间')" prop="type" align="center" width="150">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 操作 -->
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">{{ $t('保 存') }}</el-button>
    </div>
  </div>
</template>
<script>
import { showFileList } from '@/api/oa/oaFileLending/oaFileLending'
export default {
  data() {
    return {
      total: 0,
      activeName: 'deal',
      loading: false,
      // 查询参数
      queryParams: {
        belong: '',
        name: '',
        type: '',
        businessName: '',
        pageNum: 1,
        pageSize: 10
      },
      fileBorrowingList: [],
      currentTabName: '',
      resultArr: []
    }
  },
  methods: {
    // 翻页后,继续加载当前页签的数据
    getList() {
      if (this.queryParams.belong === 'enterprise') {
        this.enterpriseMethod()
      }
      if (this.queryParams.belong === 'deal') {
        this.dealMethod()
      }
      if (this.queryParams.belong === 'fund') {
        this.fundMethod()
      }
      if (this.queryParams.belong === 'investor_doc') {
        this.lpMethod()
      }
    },
    // 页签切换
    handleClick(tab, event) {
      console.log(tab, event)
      this.queryParams.pageNum = 1
      if (tab.name === 'enterprise') {
        this.enterpriseMethod()
      }
      if (tab.name === 'deal') {
        this.dealMethod()
      }
      if (tab.name === 'fund') {
        this.fundMethod()
      }
      if (tab.name === 'investor_doc') {
        this.lpMethod()
      }
    },
    resetQuery() {
      this.queryParams.type = undefined
      this.queryParams.name = undefined
      this.queryParams.businessName = undefined
      this.resetForm('queryForm')
      this.queryHandle()
    },
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 公司文档
    enterpriseMethod() {
      this.loading = true
      this.currentTabName = '无'
      this.fileBorrowingList = []
      this.queryParams.belong = 'enterprise'
      showFileList(this.queryParams).then(response => {
        this.fileBorrowingList = response.rows
        this.total = response.total
        this.toggleSelection()
        this.loading = false
      })
    },
    // 项目文档
    dealMethod() {
      this.loading = true
      this.currentTabName = '项目名称'
      this.fileBorrowingList = []
      this.queryParams.belong = 'deal'
      showFileList(this.queryParams).then(response => {
        this.fileBorrowingList = response.rows
        this.total = response.total
        this.toggleSelection()
        this.loading = false
      })
    },
    // 基金文档
    fundMethod() {
      this.loading = true
      this.currentTabName = '基金名称'
      this.fileBorrowingList = []
      this.queryParams.belong = 'fund'
        showFileList(this.queryParams).then(response => {
        this.fileBorrowingList = response.rows
        this.total = response.total
        this.toggleSelection()
        this.loading = false
      })
    },
    // 客户文档
    lpMethod() {
      this.loading = true
      this.currentTabName = '出资人名称'
      this.fileBorrowingList = []
      this.queryParams.belong = 'investor_doc'
      showFileList(this.queryParams).then(response => {
        this.fileBorrowingList = response.rows
        this.total = response.total
        this.toggleSelection()
        this.loading = false
      })
    },
    // 取消
    cancel() {
      this.resultArr = []
      this.$parent.$parent.listOfBorrowedFilesOpen = false
    },
    // 保存传到父页面
    submitForm() {
      this.$parent.$parent.addHandle(this.resultArr)
      this.cancel()
    },
    // 页签切换 选中的数据 自动打上对勾
    toggleSelection() {
      this.fileBorrowingList.forEach(row => {
        this.resultArr.forEach(item => {
          if (item.id === row.id) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row, true)
            })
          }
        })
      })
    },
    // 全选操作
    multiOperationAll(selection) {
      var temp = []
      selection.forEach(item => {
        temp.push(item)
        this.multiOperation(temp, item)
      })
      if (selection.length <= 0) {
        this.fileBorrowingList.forEach((item) => {
          if (this.resultArr.indexOf(item) !== -1) {
            this.resultArr.splice(item)
          }
        })
      }
    },
    // 单选操作
    multiOperation(selection, row) {
      var selected = selection.length && selection.indexOf(row) !== -1
      console.log(selection, row, selected)
      if (selected === true) {
        // 选中
        if (this.resultArr.length <= 0) {
          this.resultArr.push(row)
        }
        var temp = []
        this.resultArr.forEach(item => {
          temp.push(item.id)
        })
        if (!temp.includes(row.id)) {
          this.resultArr.push(row)
        }
      } else {
        // 取消选中
        this.resultArr.forEach((item, i) => {
          if (item.id === row.id) {
            this.resultArr.splice(i, 1)
          }
        })
      }
    }
  }
}
</script>
